<template>
	<div id="mine-root">
		<NavigationBar></NavigationBar>
		<div id="bgImg"></div>


		<div id="mine">
			<div class="box">
				<!-- 标题 -->
				<div class="top-box1">
					<div class="top-icon"></div>
					<h3 style="margin:0">已购买课程</h3>
				</div>

				<div
					v-for="item in 4"
					:key="item"
					class="curriculum"
				>
					<img src="/imgs/mine/math04.png" class="mine-img">
					<div class="mine-right">
						<b>电商运营初级课程</b>
						<el-progress :percentage="70" class="progress"></el-progress>
						<p class="mine-time">上次观看至 06.店铺首页规划 23分50秒</p>
						<div class="watch">
							<span class="buy-time">购买时间：2018-08-15</span>
							<span class="study">继续学习</span>
						</div>
					</div>
				</div>
			</div>
			<div class="box">
				<div class="top-box1">
					<div class="top-icon"></div>
					<h3 style="margin:0">最新课程推荐</h3>
				</div>
				<div class="mine-bottom">
					<div
						v-for="i in 4"
						:key="i"
						class="recommend"
					>
						<img src="/imgs/mine/tu02.png" class="recommend-img">
						<div style="padding:15px 16px">
							<h4 style="color:#020F1C;margin:0;margin-bottom:12px;">零基础快速建站</h4>
							<div>
								<span style="color:#AAAAAA;margin-right:20px;">原价2000</span>
								<span style="color:#02B2FB">现价￥389.00</span>
							</div>
						</div>
					</div>                                                  
				</div>
			</div>
		</div>
		<Footer/>
	</div>
</template>

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
<script>
import NavigationBar from '@/components/NavigationBar.vue'
import Footer from '@/components/Footer.vue'
export default {
	components:{
		NavigationBar,
		Footer,
	},
	data () {
		return {

		};
	},

}
</script>

<style scoped>
@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
#mine-root /deep/ #root{
    background-color: #020F1C;
    color: white;
}
#mine-root /deep/ .nav{
    width: 1200px;
}
#mine-root{
	background-color: #f4f4f4;
}
#bgImg{
	width: 100%;
	height: 200px;
	background-image: url(/imgs/mine/bj04.png);
	background-size: 100% 100%;
	background-position: 50% 50%;
}
#mine{
	width: 1200px;
	margin: 0 auto;
	padding-bottom: 90px;
}
.box{
	margin-top: 50px;
}
.top-box1{
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}
.top-icon{
	width:8px;
	height:27px;
	background:rgba(2,178,251,1);
	margin-right: 13px;
}
.curriculum{
	width: 100%;
	background-color: white;
	padding: 24px;
	margin: 30px 0;
	display: flex;
	justify-content: space-between;
}
.mine-img{
	width:311px;
	height:182px;
}
.mine-right{
	width: 70%;
}
.mine-time{
	color: #02B2FB;
	font-size: 14px;
	margin: 10px 0;
}
.progress{
	margin-top: 35px;
}
.watch{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 30px;
}
.buy-time{
	color: #FF5C01;
	font-size:14px;
}
.study{
	background-color: #02B2FB;
	padding: 11px 31px;
	color: #FFFFFF;
}
.mine-bottom{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.recommend{
	background-color: white;
}
.recommend-img{
	width: 283px;
	height: 181px;
}
</style>